<template>
  <div class="row q-gutter-xs">
    <el-tag v-for="item in modelValue" :key="item" checked closable :disable-transitions="false" @close="删(item)">
      {{ item }}
    </el-tag>
    <template v-if="显示输入框否">
      <el-select v-if="选项组.length" ref="InputRef" v-model="inputValue" class="w-20" clearable filterable allow-create
        default-first-option :reserve-keyword="false" @change="保存" @blur="保存">
        <el-option v-for="item in 选项组" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input v-else ref="InputRef" v-model="inputValue" class="w-20" @keyup.enter="保存" @blur="保存" />
    </template>
    <el-button v-else class="button-new-tag" @click="showInput" type="primary" icon="Plus" >
      添加
    </el-button>
  </div>
</template>
<script setup>
defineOptions({
  name: 'a数组',
})

import { nextTick, ref } from 'vue'

const inputValue = ref('')
const 显示输入框否 = ref(false)
const InputRef = ref(null)

const modelValue = defineModel()

const props = defineProps({
  name: {},
  选项组: { type: Array, default: [] }
})

// console.log(`字典 👉`,字典)
// import { getDictFunc, formatDate, formatBoolean, filterDict, filterDataSource, returnArrImg, onDownloadFile } from '@/utils/format'

// const options = ref([])
// // 获取需要的字典 可能为空 按需保留
// const setOptions = async () => {
//   options.value = await getDictFunc('可选属性')
// }
// // 获取需要的字典 可能为空 按需保留
// setOptions()

const 删 = (item) => {
  modelValue.value.splice(modelValue.value.indexOf(item), 1)
}

const showInput = () => {
  显示输入框否.value = true
  // InputRef.value?.focus()
  // console.log(`InputRef.value 👉`, InputRef.value)
  nextTick(() => {
    // console.log(`InputRef.value 👉`, InputRef.value)
    InputRef.value?.input?.focus()
    // console.log(`InputRef.value?.dropdownMenuVisible 👉`,InputRef.value?.dropdownMenuVisible)
    if (props.选项组.length) {
      // InputRef.value?.focus()
      InputRef.value.dropdownMenuVisible = true
    }
  })
}

const 保存 = () => {
  if (inputValue.value) {
    modelValue.value.push(inputValue.value)
  }
  显示输入框否.value = false
  inputValue.value = ''
}
</script>
<style scoped>
.el-tag {
  font-size: 1rem;
}
</style>